<!--查看境外方案-->
<template>
  <div class="modify-scheme-box">
    <div style="height: 100%;overflow-y: auto;">
      <el-form
        ref="TcForm2"
        label-position="left"
        label-width="1.2rem"
    >
      <div class="shadow" v-for="(item,index) in loadData" :key="index">
        <el-row>
          <tc-form2 :form="item.Form"></tc-form2>
        </el-row>
        <el-row>
          <h2 class="ne-title-v2">境外国际段/海外公司自有</h2>
          <OverSeaTable :OStbs="item.OStbs"></OverSeaTable>
          <h2 class="ne-title-v2">境外本地段</h2>
          <LocalTable :LTtbs="item.LTtbs"></LocalTable>
          <tc-form2 :form="item.Form2"></tc-form2>
        </el-row>
      </div>
      <el-row class="fixed">
        <el-col :span="24" class="ne-line-r flex flex-center">
          <el-button size="medium" @click="closeFun" type="primary">关闭</el-button>
        </el-col>
      </el-row>
    </el-form>
    </div>
  </div>
</template>
<script>
import TcForm2 from "@/components/public/TcForm2";
import OverSeaTable from "@/components/custorder/pengding/OverSeaTable";
import LocalTable from "@/components/custorder/pengding/LocalTable";
import CustOrderService from "@/api/order/CustOrderService";
import { mapState } from "vuex";

export default {
  name: "ModifyScheme",
  data() {
    return {
      OSInit:{
        Form: {
          "ROUTE_TYPE": {
            type: 'select',
            name: '通达方式',
            value: "",
            attrId: '9158',
            sqlId: '2021052112',
            interFaceType: 'ORDER',
            options: [],
            required: true,
            show: true,
            span: 6
          },
          "EXPORT_ORG_ID": {
            type: 'select',
            name: '出境的ITMC',
            interFaceType: 'ORDER',
            popFlag: '1',
            sqlId: '2021052113',
            value: "",
            options: [],
            required: true,
            show: true,
            span: 6
          },
          "EXPORT_POP_ID": {
            type: 'select',
            name: '海外登陆POP点',
            value: "",
            interFaceType: 'ORDER',
            popFlag: '2',
            sqlId: '2021052113',
            options: [],
            show: true,
            span: 6
          },
          "OVERSEAS_NBR": {
            type: 'Ipt',
            name: '海外公司自编号',
            value: "",
            show: true,
            span: 6
          },
          "ITMC_NAME": {
            type: 'Ipt',
            name: '境内接口ITMC',
            value: "",
            show: true,
            readonly: true,
            span: 6
          },
          "MAINTAIN_LEVEL_FLAG": {
            type: 'select',
            name: '电路维护等级是否具备',
            value: "",
            options: [{label: '不具备', value: '2'}, {label: '具备', value: '1'}],
            required: true,
            show: true,
            span: 6
          },
          "MAINTAIN_LEVEL": {
            type: 'select',
            name: '电路维护等级',
            value: "",
            attrId: 9347,
            sqlId: '2021052112',
            interFaceType: 'ORDER',
            options: [],
            required: true,
            show: true,
            span: 6
          },
          "MAINTAIN_COMMENT": {
            type: 'Ipt',
            name: '维护等级描述',
            value: "",
            show: true,
            span: 6
          },
          "ACT_DATE": {
            type: 'date',
            name: '有效期',
            value: "",
            required: true,
            show: true,
            span: 6
          },
          "IS_WRONG_ORDER": {
            type: 'select',
            name: '错单标识',
            value: "",
            options: [{label: '否', value: '2'}, {label: '是', value: '1'}],
            required: true,
            show: true,
            span: 6
          },
        },
        Form2: {
          "PROPOSE_COMMENT": {
            type: 'textarea',
            name: '备注',
            value: "",
            show: true,
            span: 12
          },
        },
        LTtbs: {
          rules:{
            OVERSEAS:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ROUTE_TYPE:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            OVERSEAS_OPP_ID:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            OVERSEAS_RES_TYPE:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            OVERSEAS_TIME:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            TIME_DELAY:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            USE_PERCENT:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            DITHER:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ADDR_START:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ADDR_END:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ROUTE:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            PROTECTED_MODE:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            BUY_EQU_FLAG:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
          },
          tableColumns: [
            {slotName: "field1", required: true, title: "境外本地段资源及电路类型"},
            {slotName: "field2", required: true, title: "资源段所属运营商"},
            {slotName: "field3", required: true, title: "资源具备情况"},
            {slotName: "field4", required: true, title: "工期"},
            {slotName: "field5", title: "月租费"},
            {slotName: "field6", title: "安装费"},
            {slotName: "field7", title: "楼宇费"},
            {slotName: "field8", title: "设备费"},
            {slotName: "field9", required: true, title: "时延(ms)"},
            {slotName: "field10", required: true, title: "可用率"},
            {slotName: "field11", required: true, title: "抖动"},
            {slotName: "field12", required: true, title: "开始地点及结束地点"},
            {slotName: "field13", required: true, title: "路由"},
            {slotName: "field14", required: true, title: "保护模式"},
            {slotName: "field15", required: true, title: "能否代购客户端设备及费用"},
            {slotName: "btn", title: "添加"}
          ],
          init: {
            field1: {OVERSEAS: {value: ''}},
            field2: {
              OVERSEAS_OPP_ID: {
                value: '', options: []
              }
            },
            field3: {OVERSEAS_RES_TYPE: {value: '1', options: [{value: '1', label: '具备'}, {value: '2', label: '不具备'}]}},
            field4: {OVERSEAS_TIME: {value: ''}},
            field5: {
              MONEY_MONTH: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field6: {
              MONEY_SETUP: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field7: {
              MONEY_BUILDING: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field8: {
              MONEY_EQU: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field9: {TIME_DELAY: {value: ''}},
            field10: {USE_PERCENT: {value: ''}},
            field11: {DITHER: {value: ''}},
            field12: {ADDR_START: {value: ''}, ADDR_END: {value: ''}},
            field13: {ROUTE: {value: ''}},
            field14: {
              PROTECTED_MODE: {
                value: 'Others',
                options: [{value: 'Others', label: 'Others'}, {
                  value: 'Unprotected',
                  label: 'Unprotected'
                }, {value: 'MS-SPRING', label: 'MS-SPRING'}]
              }
            },
            field15: {BUY_EQU_FLAG: {value: '1', options: [{value: '1', label: '是'}, {value: '0', label: '否'}]}},
            field16: {EXPORT_TYPE: {value: '2'}},
            btn: {}
          },
          tableData: [],
          tableLoading: false
        },
        OStbs: {
          rules:{
            OVERSEAS:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            CABLE_TYPE:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            OVERSEAS_OPP_ID:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            OVERSEAS_RES_TYPE:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
            OVERSEAS_TIME:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            TIME_DELAY:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            USE_PERCENT:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            DITHER:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ADDR_START:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ADDR_END:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            ROUTE:[
              { required: true, message: '请填写', trigger: 'blur' },
              { required: true, message: '请填写', trigger: 'change' }
            ],
            PROTECTED_MODE:[
              { required: true, message: '请选择', trigger: 'change' }
            ],
          },
          tableColumns: [
            {slotName: "field1", required: true, title: "境外资源段及光缆方式"},
            {slotName: "field2", required: true, title: "资源段所属运营商"},
            {slotName: "field3", required: true, title: "资源具备情况"},
            {slotName: "field4", required: true, title: "工期"},
            {slotName: "field5", title: "月租费"},
            {slotName: "field6", title: "安装费"},
            {slotName: "field7", title: "设备费"},
            {slotName: "field8", required: true, title: "时延(ms)"},
            {slotName: "field9", required: true, title: "可用率"},
            {slotName: "field10", required: true, title: "抖动"},
            {slotName: "field11", required: true, title: "开始地点及结束地点"},
            {slotName: "field12", required: true, title: "路由"},
            {slotName: "field13", required: true, title: "保护模式"},
            {slotName: "btn", title: "添加"}
          ],
          init: {
            field1: {OVERSEAS: {value: ''}, CABLE_TYPE: {value: ''}},
            field2: {
              OVERSEAS_OPP_ID: {
                value: '', options: []
              }
            },
            field3: {OVERSEAS_RES_TYPE: {value: '1', options: [{value: '1', label: '具备'}, {value: '2', label: '不具备'}]}},
            field4: {OVERSEAS_TIME: {value: ''}},
            field5: {
              MONEY_MONTH: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field6: {
              MONEY_SETUP: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field7: {
              MONEY_EQU: {
                value: '',
                opts: {
                  value: '156',
                  options: [{label: '人民币', value: '156'}, {label: '美元', value: '840'}]
                }
              }
            },
            field8: {TIME_DELAY: {value: ''}},
            field9: {USE_PERCENT: {value: ''}},
            field10: {DITHER: {value: ''}},
            field11: {ADDR_START: {value: ''}, ADDR_END: {value: ''}},
            field12: {ROUTE: {value: ''}},
            field13: {
              PROTECTED_MODE: {
                value: 'Others',
                options: [{value: 'Others', label: 'Others'}, {
                  value: 'Unprotected',
                  label: 'Unprotected'
                }, {value: 'MS-SPRING', label: 'MS-SPRING'}]
              }
            },
            field14: {EXPORT_TYPE: {value: '1'}},
            btn: {}
          },
          tableData: [],
          tableLoading: false
        }
      },
      loadData:[],
      projectObj:{},
    }
  },
  props: {
    ODKInfo: {
      type: Object
    },
    CTOInfo: {
      type: Object
    }
  },
  mounted() {

  },
  created() {
    this.initOpt();

  },
  components: {TcForm2, OverSeaTable, LocalTable},
  computed:{
    ...mapState('user',['user'])
  },
  methods: {
    // 表单option加载
    async initOpt() {
      // this.loading = true;
      for (var key in this.OSInit.Form) {
        let item = this.OSInit.Form[key];
        if (item.options && item.options.length <= 0) {
          let params = {};
          let {interFaceType, sqlId, attrId, popFlag} = item;
          if (attrId) {
            params = {interFaceType, sqlId, ...{paramStr: 'attrId:' + attrId}};
          } else if (popFlag) {
            params = {interFaceType, sqlId, ...{paramStr: 'popFlag:' + popFlag}};
          }
          const result = await CustOrderService.getExecuteSqlList(params);
          try {
            if (result.meta.resCode == 0) {
              item.options = result.meta.resList.executeSqlResps;
            } else {
              this.$message({
                showClose: true,
                message: result.meta.resultMsg,
                type: 'error'
              });
            }
          } catch {
            this.$message({
              showClose: true,
              message: 'code:' + result.code + '  msg:' + result.msg,
              type: 'error'
            });
          }
        }
      };
      // 表格内运营商获取
      const result2 = await CustOrderService.getExecuteSqlList({
        interFaceType: "ORDER",
        sqlId: "2021060502",
        paramStr: "partnerType:10210003"
      });
      // this.loading = false;
      if (result2.meta.resCode == '0') {
        this.OSInit.LTtbs.init.field2.OVERSEAS_OPP_ID.options = JSON.parse(JSON.stringify(result2.meta.resList.executeSqlResps));
        this.OSInit.OStbs.init.field2.OVERSEAS_OPP_ID.options = JSON.parse(JSON.stringify(result2.meta.resList.executeSqlResps));
        if (this.OSInit.LTtbs.tableData.length > 0) {
          this.OSInit.LTtbs.tableData.forEach(item => {
            item.field2.OVERSEAS_OPP_ID.options = JSON.parse(JSON.stringify(result2.meta.resList.executeSqlResps));
          })
        }
        if (this.OSInit.OStbs.tableData.length > 0) {
          this.OSInit.OStbs.tableData.forEach(item => {
            item.field2.OVERSEAS_OPP_ID.options = JSON.parse(JSON.stringify(result2.meta.resList.executeSqlResps));
          })
        }
      } else {
        this.$message({
          showClose: true,
          message: result.meta.resultMsg,
          type: 'error'
        });
      }
      this.getDetail();
    },
    async getDetail(){
      this.loading = true;
      this.projectObj = [];
      let base={
        userName: this.user.staffName,
        userId: this.user.staffId,
        operOrgId: this.user.orgId,
        oneOrmany:'one',
        productType: '3',
        nodeType: '50160002'
      };
      let {batchNbr,custSoNumber,orderItemId,custId} = this.CTOInfo,
          {taskId,activityId,processInstId,orderAuditId} = this.ODKInfo;
      if(taskId == 'TACHE10040001'||taskId == 'TACHE10040012'||taskId == 'TACHE10040010'||taskId == 'TACHE10050001'||taskId == 'TACHE10040014'){
        base.nodeType = '50160001';
      }
      const result = await CustOrderService.qryOutboundDetail({batchNbr,custSoNumber,orderItemId,custId,taskId,activityId,processInstId,orderAuditId,...base});
      this.initDataHandle(result.meta.solutionInterProposes);
      this.loading = false;
    },
    initDataHandle(data){
      data.forEach((item,index)=>{
        if(!item.projectType) return;
        let projectType = item.projectType;
        if(!this.projectObj['p'+projectType]){
          this.projectObj['p'+projectType]=[];
        }
        this.projectObj['p'+projectType].push(item);
      });
      for(var key in this.projectObj){
        let projectArr = this.projectObj[key];
        let newArr = [],
            capitalArr = [];
        let OSInit = JSON.parse(JSON.stringify(this.OSInit));
        projectArr.forEach((item,index)=>{
          let newObj = {};
          for(var key in item){
            let newKey = this.toCapital(key);
            newObj[newKey]=item[key];
          };
          newArr.push(newObj);
        });
        capitalArr = [...newArr];
        for(var key2 in OSInit.Form){
          OSInit.Form[key2].value = capitalArr[0][key2];
        }
        for(var key2 in OSInit.Form2){
          OSInit.Form2[key2].value = capitalArr[0][key2];
        }
        capitalArr.forEach((item2,index)=>{
          if(item2.EXPORT_TYPE == '1'){
            let init = JSON.parse(JSON.stringify(OSInit.OStbs.init));
            for(var key3 in init){
              let its = init[key3];
              for(var key4 in its){
                let its2 = its[key4];
                init[key3][key4].value = item2[key4];
              }
            }
            OSInit.OStbs.tableData.push(init);
          }else if(item2.EXPORT_TYPE == '2'){
            let init = JSON.parse(JSON.stringify(OSInit.LTtbs.init));
            for(var key3 in init){
              let its = init[key3];
              for(var key4 in its){
                let its2 = its[key4];
                init[key3][key4].value = item2[key4];
              }
            }
            OSInit.LTtbs.tableData.push(init);
          }
        });
        console.log(2);
        this.loadData.push(JSON.parse(JSON.stringify(OSInit)));
        console.log(this.loadData);
      }
    },
    /**驼峰转大写**/
    toCapital: (name)=>{
      var tfname = '';
      var array = name.split('');
      for(var i=0;i<array.length;i++){
        if(i==array.length-1) {tfname=name;break}
        let v = array[i],
            v2 = array[i+1];
        if(/^[a-z]+$/.test(v)){
          if(/^[a-z]+$/.test(v2)){
            tfname = name.replace(/([A-Z])/g,"_$1").toUpperCase();
            break;
          }
        }
      };
      return tfname
    },
    closeFun() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.ne-title-v2 {
  margin-bottom: .1rem;
}
.shadow{
  width: 99.6%;
  margin: .04rem auto .15rem auto;
  padding: .15rem;
  box-shadow: 0px 2px 9px 0px rgba(205, 212, 228, 0.75);
}
.modify-scheme-box{
  height: 86vh;
  overflow-y: auto;
  padding-bottom: .3rem;
  .fixed{
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
}
</style>
